<template>
  <div class="main">
    <div class="info pt-22">
      <div class="title mb-4">你出生的时间</div>
      <div class="sex_box"  @click="showPicker = true">
        <div :class="['birth', userInfo.birthday && 'normal' ]">{{ userInfo.birthday || '年 - 月 - 日' }}</div>
      </div>
    </div>
    <div class="txt">此刻时间为{{ date.hour}}:{{ date.minute }} - 你认为自己现在<br>是什么心理状态</div>
    <div class="mt-44 flex_center flex_wrap pb-25">
      <div class="animal_list flex_center flex_c" @click="cur = index" v-for="(item, index) in animalList" :key="index">
        <div :class="['animal_box mb-18 flex_center',  cur === index && 'on' ]" >
          <img :src="item.url" class="animal_img" />
        </div>
        <div>{{ item.title }}</div>
      </div>
    </div>
    <div class="btn" @click="onNext">下一步</div>
  </div>
  <van-popup round :safe-area-inset-bottom="true" :z-index="999999" :show="showPicker" position="bottom" >
    <DatePicker
      :nextLongYear="-13"
      @on-success="onChooseSuccess"
      @on-cancel="showPicker = false"
    />
    
  </van-popup>
</template>

<script>
import DatePicker from '@/components/datePicker'
import { getNowFormatDate } from '@/utils/utils'
import { postUserUpdate } from '@/api'
import { showToast } from 'vant'
import { useStore } from '@/store/index';
import { storeToRefs } from "pinia";
const store = useStore();

export default {
  components: { DatePicker },
  data() {
    return {
      cur: '',
      date: {},
      showPicker: false,
      userInfo: {},
      animalList: [
        {
          url: 'http://content.daylucky.cn/admin/image/dm2mllf23k1pdwybjh2s1anr.png',
          title: '美滋滋'
        },
        {
          url: 'http://content.daylucky.cn/admin/image/k73rafeuxvwk6yqnyilsh35f.png',
          title: '裂开'
        },
        {
          url: 'http://content.daylucky.cn/admin/image/8rseqh7tw1ay0j9ilpiqc26p.png',
          title: '发呆'
        },
        {
          url: 'http://content.daylucky.cn/admin/image/6zbeqrjwfm1cemjtftnnyxr6.png',
          title: 'emo'
        },
        {
          url: 'http://content.daylucky.cn/admin/image/qz382b06jhad7kxwt2jtjw90.png',
          title: '胡思乱想'
        },
        {
          url:  'http://content.daylucky.cn/admin/image/p310rgc9k8qo9z3bowg0ru9o.png',
          title: '元气满满'
        },
        {
          url: 'http://content.daylucky.cn/admin/image/p310rgc9k8qo9z3bowg0ru9o.png',
          title: '疲惫'
        },
        {
          url: 'http://content.daylucky.cn/admin/image/vs0t7kb8m2v6ipkq8uhp72iu.png',
          title: '哭泣'
        },
        {
          url:'http://content.daylucky.cn/admin/image/ygqhzo9bhia51mdf3iezxbbn.png',
          title: '难以描述'
        },
      ]
    }
  },
  created() {
    this.date = getNowFormatDate()
    const { userInfo } = storeToRefs(store)
    this.userInfo = userInfo
  },
  methods: {
    async onChooseSuccess(birth_day) {
      this.showPicker = false
      this.userInfo.birthday = birth_day
      // const { code, data } = await postUserUpdate({ ...this.userInfo, birth_day })
      // if (code === 1000) {
      //   this.userInfo = data
      //   store.setUserInfo(data)
        // if (info.nick_name && info.avatar) {
        //   try {
        //     data.astro_id !== '' && this.fnGet(data.astro_id)
        //   } catch (error) {
        //   }
        // }
      // }
    },
    onNext() {
      console.log(this.userInfo.birthday)
      if (this.cur === '') {
        showToast('请选择一个心理状态吧')
        return false
      }
       if (!this.userInfo.birthday) {
        showToast('请选择出生日期吧')
        return false
      }
      this.$router.replace({ path: '/mirror/canvas', query: { owned: true }})
      // uni.navigateTo({
      //   url: '/pages/canvas/index?owned=true'
      // })
    }
  }

}
</script>
<style lang="scss" scoped>
.main {
  padding-bottom: 65px;
  background: #FFFFFF;
}
.sex_box {
  height: 38px;
  position: relative;
  padding-left: 1px;
  padding-right: 13px;
  line-height: 38px;
  .birth {
    font-family: pf_regular;
    height: 38px;
    line-height: 38px;
    // font-weight: 600;
    font-size: 16px;
    color: rgba(0,0,0,.4);
    &.normal {
      color: rgba(0,0,0,1);
    }
    .year {
      width: 40px;
    }
  }
  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 311px;
    height: 2px;
    background: #000000;
    border-radius: 11px 11px 11px 11px;
  }
  .example {
    // font-weight: 400;
    font-size: 12px;
    font-family: pf_regular;
    color: #000000;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}
.info {
  width: 311px;
  margin: 0 auto;
  
}
.title {
  // font-weight: 600;
  font-size: 20px;
  color: #000000;
  line-height: 24px;
}
.txt {
  // font-weight: normal;
  font-size: 16px;
  color: #000000;
  text-align: center;
  font-style: normal;
 	font-family: pf_bold;
  margin-top: 42px;
  line-height: 29px;

}
.animal_list {
  width: 104px;
  // font-weight: 400;
  font-size: 14px;
  color: #000000;
  line-height: 20px;
  margin-bottom: 32px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  .animal_box {
    width: 54px;
    height: 54px;
    &.on {
      background: url(http://content.daylucky.cn/admin/image/y48vfscuqwzsg1rkw9dttc9d.png) no-repeat left top / cover;
    }
  }
  .animal_img {
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 40px;
  }
}

.btn {
  width: 310px;
  height: 48px;
  border-radius: 43px 43px 43px 43px;
  text-align: center;
  margin: 0 auto;
  background: #000000;
  font-size: 16px;
  color: #FFFFFF;
  line-height: 48px;
  font-style: normal;
}

</style>